<template>
	<div class="app-user">
		<a-dropdown
			:trigger="['click']"
			overlayClassName="app-user__dropdown"
			:transfer="true"
		>
			<div class="app-user__caption">
				<span>{{ user.name ? user.name : $t('common.user.name') }}</span>
				<a-avatar :src="user.avatar" />
			</div>
			<template #overlay>
				<a-menu class="menu" @click="handleSelect">
					<a-menu-item key="lock">
						<LockOutlined />
						<span>{{ $t('common.user.lock') }}</span>
					</a-menu-item>
					<a-menu-item key="logout">
						<LoginOutlined />
						<span>{{ $t('common.user.logout') }}</span>
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
		<a-modal
			:title="$t('function.lockscren.lock')"
			v-model:visible="showModal"
			width="30%"
		>
			<a-form :model="form" autocomplete="off">
				<a-form-item
					:label="$t('function.lockscren.label')"
					name="password"
					:rules="rules.password"
				>
					<a-input
						v-model:value="form.password"
						:placeholder="$t('function.lockscren.placeholder')"
					></a-input>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button
					class="lock-scren-footer-btn"
					type="primary"
					@click="handleLock"
					>{{ $t('function.lockscren.confirmbuttontext') }}</a-button
				>
			</template>
		</a-modal>
	</div>
</template>
<script setup lang="ts">
import { Form } from 'ant-design-vue';
import {
	LoginOutlined,
	SettingOutlined,
	LockOutlined,
} from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { getCookie } from 'qx-util';
import { IParam } from '@/core';
const route: any = useRoute();
const { push } = useRouter();
const user = reactive({
	name: '当前用户',
	avatar: '@/assets/img/avatar.png',
});

let showModal = ref<boolean>(false);
const form = reactive({ password: '' });
const useForm = Form.useForm;
const rules = reactive({
	password: [
		{
			required: true,
			message: `${App.ts('function.lockscren.message', '锁屏密码不能为空！')}!`,
		},
	],
});

const handleLock = () => {
	const { validate } = useForm(form, rules);
	validate(['password'])
		.then((result) => {
			if (result) {
				const username = user.name == '' ? 'visitor' : user.name;
				const password = window.btoa(form.password);
				sessionStorage.setItem('lockPassword', password);
				sessionStorage.setItem('lockState', 'true');
				sessionStorage.setItem('userName', username);
				push({
					path: '/lock',
					query: { redirect: window.location.hash.replace('#', '') },
				});
			}
		})
		.catch(() => {
			App.getNotificationHelper().error(
				App.ts('function.generic.error', '错误'),
				App.ts('function.lockscren.placeholder', '请输入锁屏密码')
			);
		});
};

onMounted(() => {
	const appData = App.getAppData();
	if (appData) {
		if (appData.context && appData.context.srfpersonname) {
			user.name = appData.context.srfpersonname;
		} else {
			if (getCookie('ibzuaa-user')) {
				let _user: any = JSON.parse(getCookie('ibzuaa-user') as string);
				if (user && _user.personname) {
					user.name = _user.personname;
				}
			}
		}
		if (appData.context && appData.context.srfusericonpath) {
			user.avatar = appData.context.srfusericonpath;
		}
	} else {
		if (getCookie('ibzuaa-user')) {
			let _user: any = JSON.parse(getCookie('ibzuaa-user') as string);
			if (user && _user.personname) {
				user.name = _user.personname;
			}
		}
	}
});

//下拉选选中回调
const handleSelect = (item: IParam) => {
	const { key } = item;
	switch (key) {
		case 'lock':
			showModal.value = true;
			break;
		case 'logout':
			App.logout().then(() => {
				push({
					path: '/login',
					query: { redirect: window.location.hash.replace('#', '') },
				});
			});
			break;
	}
};
</script>
